import { registerMicroApps, runAfterFirstMounted, start } from 'qiankun'
import actions from './action'
import { useUserStore } from '@glz/utils'
import { BASE_VITE_TS_KEY } from '@/config'
//import pager from './utils/pager'
//import { pinia } from '@glz/utils'

const useQianKun = () => {

  const loader = (loading:string) => {
    console.log(loading)
  }

  const getMsg = () => {

    const store = useUserStore(BASE_VITE_TS_KEY)


    console.log("user:",store.user)

    const globalState = {
      theme: "red",
      language: "en",
      useUserStore: store.user
    };
  
    //actions.setGlobalState(globalState)

    const msg = { // 结合下章主应用下发资源给子应用，将pager作为一个模块传入子应用
      data: globalState, // store.getters, // 从主应用仓库读出的数据
      components: null, // LibraryUi, // 从主应用读出的组件库
      utils: null, // LibraryJs, // 从主应用读出的工具类库
      emitFnc: null, // childEmit, // 从主应用下发emit函数来收集子应用反馈
      // pager, // 从主应用下发应用间通信呼机
      actions,
      // setUser:(val:any) => {
      //   const store_user = useUserStore(BASE_VITE_TS_KEY)
      //   store_user.user = val
      //   console.log('[主應用] 收到子應用更新：', val)
      // }
    }

    console.log("msg",msg)
    return msg
  }
 // console.log("msg:", msg)

  registerMicroApps([
    {
      name:'sub-vite-js',
      entry:'//localhost:3010',
      container: '#subapp-container',
      activeRule: '/sub-vite-js',
      props: () => getMsg()
    },
    {
      name:'sub-vite-ts',
      entry:'//localhost:3020',
      container: '#subapp-container',
      activeRule: '/sub-vite-ts',
      props: () => getMsg()
    },
    {
      name:'sub-vue-js',
      entry:'//localhost:3030',
      container: '#subapp-container',
      activeRule: '/sub-vue-js',
      props: () => getMsg()
    }
  ],{
    beforeLoad: (props) => {
      //console.log(props)
      console.log('加載前')
    },
    beforeMount: () => {
      console.log('掛載前')
    },
    afterMount: () => {
      console.log('掛載後')
    },
    beforeUnmount: () => {
      console.log('銷毀前')
    },
    afterUnmount: () => {
      console.log('銷毀後')
    }
  })

  // qiankun 中處理樣式 如何處理的
  // 默認情況下切換應用 她會採用動態樣式表，加載的時候添加樣式 刪除的時候卸載樣式 （子應用之間的樣式隔離）

  // 主應用和子應用 如何隔離 （我們可以通過BEM規範） -> (css-modules) 動態生成一個前綴 （並不是完全隔離）
  // shadowDOM video 標籤中的快進 放大功能 增加全局樣式就會有問題

  /**
   * @name 启动微前端， 已經放到子頁面進行啟動了
   */
  // start({
  //   sandbox: {
  //     // experimentalStyleIsolation: true,
  //     strictStyleIsolation: true
  //   }
  // })

  /**
  * @name 设置默认进入的子应用
  * @param {String} 需要进入的子应用路由前缀
  */
  // setDefaultMountApp('/app1')

  /**
   * @name 微前端启动进入第一个子应用后回调函数
   */
  runAfterFirstMounted(() => {
    console.log('[MainApp] first app mounted')
  })

  start()
  
}

export { useQianKun }
